<template>
    <!-- 商品分类页面 -->
    <div class="category">
        <!-- 头部 -->
        <el-card class="operate-container" shadow="never"  align="center">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button size="mini" class="btn-add" style="margin-left: 20px" @click="addProduct()">添加</el-button>
        </el-card>
        <!-- 表格部分 -->
        <el-table :data="list" align="center" style="width: 100%"  border="0" :lazy="true">
            <el-table-column prop="id" width="100" label="编号"  align="center"/>
            <el-table-column prop="name" label="分类名称"  align="center" />
            <el-table-column prop="level" label="级别"  align="center"/>
            <el-table-column prop="productCount"  label="商品数量"  align="center"/>
            <el-table-column prop="productUnit"  label="数量单位"  align="center"/>,
            <el-table-column label="导航栏" width="100" align="center">
                    <template #default="scope">
                        <!-- 插入的scope 是一个对象 里面的row属性是 当前行的数据 -->
                        <el-switch @change="NavStstus(scope.row)" v-model="scope.row.navStstus" :active-value="1" :inactive-value="0" />

                    </template>
                </el-table-column>
            <el-table-column label="是否显示" width="100" align="center">
                    <template #default="scope">
                        <!-- 插入的scope 是一个对象 里面的row属性是 当前行的数据 -->
                        <el-switch @change="ShowStatus(scope.row)" v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" />
                    </template>
                </el-table-column>
            <el-table-column prop="sort" label="排序" width="100" align="center"/>
            <el-table-column label="设置" width="200" align="center">
                    <template #default="scope">
                        <!-- 插入的scope 是一个对象 里面的row属性是 当前行的数据 -->
                        <el-button type="primary" color="#fff" size="small" @click="findofity(scope.row)">查看下级</el-button>
                       
                         <el-button type="primary" color="#fff" size="small">转移商品</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <!-- 插入的scope 是一个对象 里面的row属性是 当前行的数据 -->
                        <el-button type="primary" color="#fff" size="small" @click="editproductCatitity(scope.row)">编辑</el-button>
                        <el-button type="primary" text @click="delProtatle(scope.row)" color="#F56C6C" size="small">删除</el-button>
                    </template>
                </el-table-column>
                


        </el-table>
        <!-- 分页 -->
        <div class="productpage">
            <el-pagination
                v-model:current-page="objPage.pageNum"
                v-model:page-size="objPage.pageSize"
                :page-sizes="[5,10,20,50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"  
                @size-change="sizeChange" 
                @current-change="currentChnange"             
             />
        </div>
        
    </div>
</template>
<script lang="ts" setup>

// 导入数据之类的
import { ElMessageBox,ElMessage } from 'element-plus'
// 导入ref
import {ref} from 'vue'
import type { Ref } from 'vue'
// 导入类型定义
import {productCategoryListData, 
        adminListData,
        productCategoryUpdate,
        productCategoryUpdaten,
} from '@/utils/adminType'
// 导入接口
import {productCategoryList,
        productCategoryDelete,
        productCategory,
        productCategoryUpAate,
        productCategoryListFound,
    } from '@/api/admin'
// 引入elementplus的消息弹框
import type { Action } from 'element-plus'
import router from '@/router'
import {store} from '@/store/index'
// import editproductCate from './editproductCatity.vue'


// 创建页面请求数据
const objPage:Ref<adminListData> = ref({
    pageNum:1,
    pageSize:5,
    keyword:""
})
// 创建分页显示数据
const pagination:Ref<any> = ref({
    pageNum: 1,
    pageSize: 5,
    total: 6,
    totalPage: 2,
})
// 创建data数据
const list: Ref<productCategoryListData[]> = ref([]);

// 调用函数
productCategority()
// 创建请求数据的接口

function productCategority():void { 
    productCategoryList(objPage.value).then((res:any)=>{
        if(res.code===200){
            list.value=res.data.list
            // 删除res.data.list
            delete res.data.list
            // 改变分页数据
            pagination.value = res.data
        }
        console.log(list.value); 
    })
}
// 每页显示条数改变事件
function sizeChange(e:number){
    // 改变pageSize
    objPage.value.pageSize=e
    console.log(e);
    productCategority()
    
}
// 页数改变事件
function currentChnange(e:number){
    // 改变pageNum
    objPage.value.pageNum=e
    productCategority()
    console.log(e);
    
}
// 删除角色
function delProtatle(data:productCategoryListData):void{
  ElMessageBox.confirm(
    '是否要删除该品牌',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      callback: (action: Action) => {
       if(action == 'confirm'){
            // console.log('点击了确定');
            // 发送删除用户请求
            productCategoryDelete(data.id).then((res:any)=>{
               if(res.code === 500){
                ElMessage({
                    type: 'error',
                    message: res.message,
                })
               }
                
            })
       }
        
    },
    }
  )
}
// 是否显示状态/
function ShowStatus(data:productCategoryUpdate):void{
    let formDataPorduct = new FormData()
    formDataPorduct.append('ids', String(data.id))
    formDataPorduct.append('showStatus',String(data.showStatus))
                // console.log('点击了确定');
                // 发送删除用户请求
                productCategory(formDataPorduct).then((res:any) => {
                    if(res.code === 500){
                        ElMessage({
                            type: 'error',
                            message: res.message,
                        })
                    }
                })
            }
   
// 导航栏是否显示
function NavStstus(data:productCategoryUpdaten):void{
    let formDataPorducts = new FormData()
    formDataPorducts.append('ids', String(data.id))
    formDataPorducts.append('navStatus',String(data.navStatus))
                // console.log('点击了确定');
                // 发送删除用户请求
                productCategoryUpAate(formDataPorducts).then((res:any) => {
                    if(res.code === 500){
                        ElMessage({
                            type: 'error',
                            message: res.message,
                        })
                    }
                })
            }



// 是否显示角色的弹框
const addRoleshow:Ref<boolean> = ref(false)
// 添加角色

function addProduct(e:any):void{
    // console.log(e.id);
    router.push('/pms/addProductCate')
}

// 查看下级
function findofity(e:any):void{
    // console.log(e.id);
    router.push("/pms/productCate/" + e.id)
}
// 编辑
function editproductCatitity(e:any):void{
    store.id = e.id
    router.push('/pms/editproductCatitity')
}
</script>
<style lang="scss" scoped>
    .category{
        width: 100%;
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;

        }


      .productpage{
        float: right;

      }
    }
</style>